<template>
  <div class="chart-container">
    <div class="chart-text">图表</div>
    <div class="chart-list">
      <div class="line-chart">
        <Chart :option="lineChartOption" />
      </div>
      <div class="pie-chart">
        <Chart :option="pieChartOption" @click="handlerClick" />
      </div>
    </div>
  </div>
</template>

<script>
import Chart from "@/components/Chart";
import random from "lodash/random";

export default {
  name: "Echart",
  components: {
    Chart,
  },
  data() {
    return {
      lineChartOption: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            // smooth: true, // 是否平滑，支持：false(默认值) / true / 0~1(平滑程度)
            // 文本标签
            label: {
              // show: true, // 是否显示文本标签，支持：false(默认值) / true
            },
          },
        ],
      },
      pieChartOption: {
        tooltip: {
          trigger: "item",
        },
        // 图例组件
        legend: {
          // orient: "vertical", // 图例组件的布局朝向，支持：horizontal(默认值) / vertical
          // top: '5%', // 图例组件离容器上侧的距离
          // bottom: "0", // 图例组件离容器下侧的距离
          // left: "center", // 图例组件离容器左侧的距离
          // right: "0", // 图例组件离容器右侧的距离
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            // selectedMode: "single", // 选中模式的配置，默认关闭，支持：single / multiple / series
            // selectedOffset: "20", // 选中扇区的偏移距离，默认10
            // radius: ["40%", "70%"], // 内半径（中间空白区域）、外半径，默认["0", "75%"]
            avoidLabelOverlap: false,
            // 文本标签
            label: {
              // show: false, // 是否显示文本标签，支持：false / true(默认值)
              // position: "inside", // 文本标签的位置，支持：outside(默认值) / inside / inner / center
            },
            emphasis: {
              // 鼠标悬停时，文本标签
              label: {
                // show: false, // 是否显示文本标签，支持：false / true(默认值)
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            labelLine: {
              // show: false, // 文本标签的视觉引导线配置，支持：false / true(默认值)
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads", selected: true }, // 默认选中
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.interval = setInterval(() => {
      this.lineChartOption.series[0].data =
        this.lineChartOption.series[0].data.map(() => random(100));
      this.lineChartOption = { ...this.lineChartOption }; // 不写这行代码，就需要深度监听数据，性能开销较大

      this.pieChartOption.series[0].data =
        this.pieChartOption.series[0].data.map((item) => {
          item.value = random(100);
          return item;
        });
      this.pieChartOption = { ...this.pieChartOption }; // 不写这行代码，就需要深度监听数据，性能开销较大
    }, 5000);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    handlerClick(params) {
      console.log("params", params);
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  margin: 30px;

  .chart-text {
    font-size: 30px;
    line-height: 46px;
  }

  .chart-list {
    display: flex;
    justify-content: space-between;

    .line-chart {
      width: 45%;
      height: 300px;
      border: 1px solid red;
    }

    .pie-chart {
      width: 45%;
      height: 300px;
      border: 1px solid black;
    }
  }
}
</style>
